<template>
  <view class="page-container">
    <!-- 轮播图区域 -->
    <view>
      <Swiper :swiperList="swiperImages" />
    </view>

    <!-- 热榜区域 -->
    <view class="hot-list-container">
      <view class="hot-list-header">
        <view class="hot-title">
          <text class="hot-icon">🔥</text>
          <text class="hot-text">热榜</text>
        </view>
        <view class="hot-actions">
          <view class="action-btn" @click="showTimeFilterDialog">💬</view>
          <view class="action-btn" @click="goToSearch">🔍</view>
        </view>
      </view>

      <view class="hot-item" @click="goToHotDetail()">
        <text class="hot-content">{{ hotItem.content }}</text>
        <view class="hot-stats">
          <text class="hot-category">{{ hotItem.category }}</text>
          <text class="hot-count">🔥{{ hotItem.count }}</text>
        </view>
      </view>
    </view>

    <!-- 动态页面内容 -->
    <view class="dynamics-container">
      <!-- 头部标题和切换 -->
      <view class="header-section">
        <view class="title-section">
          <text class="page-title">动态</text>
        </view>
        <view class="tab-switches">
          <view
            class="tab-item"
            :class="{ active: currentTab === 'latest' }"
            @click="switchTab('latest')"
          >
            最新
          </view>
          <view
            class="tab-item"
            :class="{ active: currentTab === 'hot' }"
            @click="switchTab('hot')"
          >
            热门
          </view>
        </view>
      </view>

      <!-- 分类标签 -->
      <view class="category-tabs">
        <scroll-view class="scroll-tabs" scroll-x="true" show-scrollbar="false">
          <view
            v-for="(category, index) in categories"
            :key="index"
            class="category-item"
            :class="{ active: currentCategory === category.id }"
            @click="selectCategory(category.id)"
          >
            {{ category.name }}
          </view>
        </scroll-view>
      </view>

      <!-- 动态列表 -->
      <DynamicsList
        :dynamicsList="filteredDynamics"
        :loading="loading"
        :noMore="noMore"
        :likedItems="likedItems"
        @likeClick="handleLike"
        @itemClick="handleItemClick"
      />

      <!-- 时间筛选弹窗 -->
      <view
        v-if="showTimeFilterPopup"
        class="time-filter-overlay"
        @click="hideTimeFilterDialog"
      >
        <view class="time-filter-popup" @click.stop>
          <view class="popup-header">
            <view class="close-btn" @click="hideTimeFilterDialog">×</view>
            <text class="popup-title">时间筛选</text>
            <view class="confirm-btn" @click="confirmTimeFilter">确定</view>
          </view>

          <view class="popup-content">
            <view class="time-machine-section">
              <view class="time-machine-header">
                <text class="section-label">时光机</text>
                <view class="time-machine-btn" @click="applyCurrentTime"
                  >立即应用当前时间</view
                >
              </view>
            </view>

            <!-- 快捷日期选项 -->
            <view class="quick-date-section">
              <view class="section-header">
                <text class="section-label">快捷选择</text>
              </view>
              <view class="quick-buttons">
                <view class="quick-btn" @click="setQuickDate('today')"
                  >今天</view
                >
                <view class="quick-btn" @click="setQuickDate('yesterday')"
                  >昨天</view
                >
                <view class="quick-btn" @click="setQuickDate('week')"
                  >本周</view
                >
                <view class="quick-btn" @click="setQuickDate('month')"
                  >本月</view
                >
              </view>
              <view class="quick-buttons">
                <view class="quick-btn" @click="setQuickDate('7days')"
                  >最近7天</view
                >
                <view class="quick-btn" @click="setQuickDate('30days')"
                  >最近30天</view
                >
              </view>
            </view>

            <!-- 手动输入日期区域 -->
            <view class="manual-input-section">
              <view class="section-header">
                <text class="section-label">精确日期</text>
                <view class="clear-btn" @click="clearDate">清空</view>
              </view>
              <view class="input-row">
                <input
                  class="date-input"
                  type="number"
                  placeholder="年份"
                  v-model="manualYear"
                  maxlength="4"
                  @input="validateInput"
                />
                <text class="input-separator">年</text>
                <input
                  class="date-input"
                  type="number"
                  placeholder="月"
                  v-model="manualMonth"
                  maxlength="2"
                  @input="validateInput"
                />
                <text class="input-separator">月</text>
                <input
                  class="date-input"
                  type="number"
                  placeholder="日"
                  v-model="manualDay"
                  maxlength="2"
                  @input="validateInput"
                />
                <text class="input-separator">日</text>
              </view>
              <view class="date-preview" v-if="isValidDate">
                预览：{{ formatPreviewDate() }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 悬浮球发布按钮 -->
      <HoverBall
        :imageUrl="publishIcon"
        targetPath=""
        navigateType="navigateTo"
        initialPosition="bottomRight"
        :size="60"
        @ballClick="handlePublishClick"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import axios from "axios";
import Swiper from "../zujian/swiper.vue";
import HoverBall from "../zujian/hoverball.vue";
// @ts-ignore
import DynamicsList from "../zujian/dynamics_list.vue";

// 声明uni全局对象
declare const uni: any;

// 定义类型接口
interface Attachment {
  url: string;
  type?: string;
  name?: string;
  poster?: string;
}

interface DynamicItem {
  id: number;
  username: string;
  avatar: string;
  time: string;
  content: string;
  categoryId: string;
  categoryName: string;
  likes: number;
  comments: number;
  favorites: number;
  isHot: boolean;
  attachments?: Attachment[];
}

interface Category {
  id: string;
  name: string;
}

interface TimeFilter {
  startDate?: string;
  endDate?: string;
}

interface HotItem {
  content: string;
  category: string;
  count: number;
  item: DynamicItem | null;
}

// 响应式数据
const swiperImages = ref<string[]>([
  "/static/images/swiper/lunbo1.jpg",
  "/static/images/swiper/lunbo2.jpg",
  "/static/images/swiper/lunbo3.jpg",
]);

const currentTab = ref<"latest" | "hot">("latest");
const currentCategory = ref<string>("all");
const loading = ref<boolean>(false);
const noMore = ref<boolean>(false);
const currentPage = ref<number>(1);
const pageSize = ref<number>(3); // 每页3条，便于触底加载演示
const dynamicsList = ref<DynamicItem[]>([]);
const likedItems = ref<Set<string | number>>(new Set()); // 记录已点赞的项目

// 时间筛选相关
const showTimeFilterPopup = ref<boolean>(false);
const currentTimeFilter = ref<TimeFilter>({});

// 时间选择器相关
const currentDate = new Date();

// 手动输入日期相关
const manualYear = ref<string>("2024");
const manualMonth = ref<string>("7");
const manualDay = ref<string>("15");

// 日期验证相关
const isValidDate = ref<boolean>(false);

const publishIcon = ref<string>(
  ""
);

// 移除固定的热榜数据，改为计算属性

const categories = ref<Category[]>([
  { id: "all", name: "全部" },
  { id: "help", name: "互相补差价" },
  { id: "insurance", name: "保理西院" },
  { id: "confession", name: "表白捞人" },
  { id: "complain", name: "树洞吐槽" },
]);

// 移除模拟数据，完全依赖后端API

// 计算属性
// 热榜动态 - 获取阅读量最高的动态
const hotItem = computed(() => {
  if (dynamicsList.value.length === 0) {
    return {
      content: "暂无热门动态",
      category: "热门",
      count: 0,
      item: null,
    };
  }

  // 找到阅读量最高的动态
  const hotestDynamic = dynamicsList.value.reduce((max, current) => {
    return current.favorites > max.favorites ? current : max;
  });

  return {
    content:
      hotestDynamic.content.length > 30
        ? hotestDynamic.content.substring(0, 30) + "..."
        : hotestDynamic.content,
    category: hotestDynamic.categoryName,
    count: hotestDynamic.favorites,
    item: hotestDynamic,
  };
});

const filteredDynamics = computed(() => {
  // 后端已经处理了分类筛选、时间筛选和排序
  // 这里直接返回从后端获取的数据
  return dynamicsList.value;
});

// 方法
const switchTab = (tab: "latest" | "hot") => {
  currentTab.value = tab;
  resetData();
};

const selectCategory = (categoryId: string) => {
  currentCategory.value = categoryId;
  resetData();
};

// 时间筛选相关方法

const showTimeFilterDialog = () => {
  showTimeFilterPopup.value = true;
  console.log("=== 打开时间筛选弹窗 ===");
};

const hideTimeFilterDialog = () => {
  showTimeFilterPopup.value = false;
};

const applyCurrentTime = () => {
  // 清除时间筛选条件
  currentTimeFilter.value = {};

  // 关闭弹窗
  showTimeFilterPopup.value = false;

  // 重新加载数据（不带时间筛选）
  resetData();
};

// 快捷日期设置
const setQuickDate = (type: string) => {
  const now = new Date();
  let targetDate = new Date();

  console.log(`=== 快捷选择：${type} ===`);

  switch (type) {
    case "today":
      targetDate = now;
      break;
    case "yesterday":
      targetDate = new Date(now.getTime() - 24 * 60 * 60 * 1000);
      break;
    case "week":
      // 本周第一天（周一）
      const dayOfWeek = now.getDay() || 7; // 周日为0，改为7
      targetDate = new Date(
        now.getTime() - (dayOfWeek - 1) * 24 * 60 * 60 * 1000
      );
      break;
    case "month":
      // 本月第一天
      targetDate = new Date(now.getFullYear(), now.getMonth(), 1);
      break;
    case "7days":
      targetDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
      break;
    case "30days":
      targetDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
      break;
  }

  // 设置输入框的值
  manualYear.value = targetDate.getFullYear().toString();
  manualMonth.value = (targetDate.getMonth() + 1).toString();
  manualDay.value = targetDate.getDate().toString();

  console.log(
    `设置日期为: ${targetDate.getFullYear()}年${
      targetDate.getMonth() + 1
    }月${targetDate.getDate()}日`
  );

  // 验证输入
  validateInput();

  // 显示提示
  uni.showToast({
    title: `已设置为${
      type === "today"
        ? "今天"
        : type === "yesterday"
        ? "昨天"
        : type === "week"
        ? "本周"
        : type === "month"
        ? "本月"
        : type === "7days"
        ? "最近7天"
        : "最近30天"
    }`,
    icon: "success",
    duration: 1500,
  });
};

// 清空日期
const clearDate = () => {
  manualYear.value = "";
  manualMonth.value = "";
  manualDay.value = "";
  isValidDate.value = false;

  uni.showToast({
    title: "已清空日期",
    icon: "success",
    duration: 1000,
  });
};

// 验证输入
const validateInput = () => {
  const year = parseInt(manualYear.value);
  const month = parseInt(manualMonth.value);
  const day = parseInt(manualDay.value);

  isValidDate.value =
    year >= 2020 &&
    year <= 2030 &&
    month >= 1 &&
    month <= 12 &&
    day >= 1 &&
    day <= 31 &&
    manualYear.value.length > 0 &&
    manualMonth.value.length > 0 &&
    manualDay.value.length > 0;
};

// 格式化预览日期
const formatPreviewDate = () => {
  const year = parseInt(manualYear.value);
  const month = parseInt(manualMonth.value);
  const day = parseInt(manualDay.value);

  if (isValidDate.value) {
    const date = new Date(year, month - 1, day);
    const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
    return `${year}年${month}月${day}日 ${weekdays[date.getDay()]}`;
  }
  return "";
};

const confirmTimeFilter = () => {
  console.log("=== 确定按钮：使用手动输入日期 ===");

  const year = parseInt(manualYear.value);
  const month = parseInt(manualMonth.value);
  const day = parseInt(manualDay.value);

  console.log(`手动输入的日期: ${year}年${month}月${day}日`);

  // 验证输入的有效性
  if (!year || year < 2020 || year > 2030) {
    uni.showToast({
      title: "请输入有效年份(2020-2030)",
      icon: "none",
    });
    return;
  }

  if (!month || month < 1 || month > 12) {
    uni.showToast({
      title: "请输入有效月份(1-12)",
      icon: "none",
    });
    return;
  }

  if (!day || day < 1 || day > 31) {
    uni.showToast({
      title: "请输入有效日期(1-31)",
      icon: "none",
    });
    return;
  }

  // 直接使用手动输入的日期
  const selectedDate = new Date(year, month - 1, day, 0, 0, 0, 0);
  const endDate = new Date(year, month - 1, day, 23, 59, 59, 999);

  console.log("创建的时间对象:", selectedDate);

  // 格式化为 YYYY-MM-DD 格式
  const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  };

  currentTimeFilter.value = {
    startDate: formatDate(selectedDate),
    endDate: formatDate(new Date(endDate.getTime() + 1)), // 下一天00:00:00
  };

  console.log("✅ 时间筛选条件:", currentTimeFilter.value);

  showTimeFilterPopup.value = false;
  resetData(); // 重新加载数据
};

const resetData = () => {
  currentPage.value = 1;
  noMore.value = false;
  dynamicsList.value = [];
  loadData();
};

// 获取分类数据
const loadCategories = async () => {
  try {
    const response = await axios.get("/h5api/jjx/categories");

    if (response.status === 200 && response.data.success) {
      const { topics, tags } = response.data.data;
      console.log("获取到的分类数据:", { topics, tags });

      // 更新分类列表，保留"全部"选项
      const newCategories = [
        { id: "all", name: "全部" },
        ...topics.map((topic: string) => ({ id: topic, name: topic })),
      ];

      categories.value = newCategories;
    }
  } catch (error) {
    console.error("获取分类失败:", error);
  }
};

const loadData = async () => {
  // 防止重复加载
  if (loading.value) {
    console.log("⏳ 正在加载中，跳过重复请求");
    return;
  }

  if (noMore.value) {
    console.log("✋ 没有更多数据了");
    return;
  }

  console.log(`📄 开始加载第 ${currentPage.value} 页数据`);
  loading.value = true;

  try {
    // 构建API请求参数
    const params: any = {
      page: currentPage.value,
      limit: pageSize.value,
    };

    // 根据当前排序方式添加sort参数
    if (currentTab.value === "hot") {
      params.sort = "hot";
    } else {
      params.sort = "latest";
    }

    // 根据当前分类筛选
    if (currentCategory.value !== "all") {
      // 分类映射
      const categoryMap: Record<string, string> = {
        help: "帮助",
        insurance: "保险",
        confession: "表白",
        complain: "吐槽",
      };
      if (categoryMap[currentCategory.value]) {
        params.topic = categoryMap[currentCategory.value];
      }
    }

    // 添加时间筛选参数
    if (currentTimeFilter.value.startDate && currentTimeFilter.value.endDate) {
      params.startDate = currentTimeFilter.value.startDate;
      params.endDate = currentTimeFilter.value.endDate;
    }

    console.log("请求参数:", params);

    // 调用后端API获取essay数据
    const response = await axios.get("/h5api/jjx/getessays", {
      params: params,
    });

    console.log("API响应:", response);

    if (response.status === 200 && response.data.success) {
      const essayData = response.data.data || [];

      // 将essay数据转换为前端显示格式
      const newDynamics = essayData.map((essay: any, index: number) => {
        return {
          id: essay._id || (currentPage.value - 1) * pageSize.value + index + 1,
          username: essay.anonymity
            ? "匿名用户"
            : essay.author?.name || "匿名用户",
          avatar: (() => {
            if (essay.anonymity) {
              // 匿名用户使用指定的lan1.jpg头像
              const anonymousAvatar = "/static/images/touxiang/lan1.jpg";
              console.log(
                `🔒 匿名用户 ${essay._id} 使用头像: ${anonymousAvatar}`
              );
              return anonymousAvatar;
            } else {
              // 非匿名用户使用作者头像或默认头像
              const userAvatar =
                essay.author?.avatar ||
                "";
              console.log(
                `👤 非匿名用户 ${essay.author?.name} 使用头像: ${userAvatar}`
              );
              return userAvatar;
            }
          })(),
          time: essay.createdata
            ? new Date(essay.createdata).getTime() > 0
              ? new Date(essay.createdata)
                  .toLocaleString("zh-CN", {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                    hour: "2-digit",
                    minute: "2-digit",
                  })
                  .replace(/\//g, "-")
              : new Date()
                  .toLocaleString("zh-CN", {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                    hour: "2-digit",
                    minute: "2-digit",
                  })
                  .replace(/\//g, "-")
            : new Date()
                .toLocaleString("zh-CN", {
                  year: "numeric",
                  month: "2-digit",
                  day: "2-digit",
                  hour: "2-digit",
                  minute: "2-digit",
                })
                .replace(/\//g, "-"),
          content: essay.context || "暂无内容",
          categoryId: essay.topic?.[0] || "all",
          categoryName: essay.topic?.[0] || "全部",
          likes: essay.likes?.length || 0,
          comments: essay.comments || 0,
          favorites: essay.views || 0,
          isHot: (essay.views || 0) > 10 || (essay.likes?.length || 0) > 3,
          // 将后端的img字段转换为前端的attachments格式
          attachments:
            essay.img?.map((mediaUrl: string) => {
              // 判断是图片还是视频
              const isVideoFile = /\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i.test(
                mediaUrl
              );
              return {
                url: mediaUrl,
                type: isVideoFile ? "video" : "image",
                name: isVideoFile ? "视频" : "图片",
                duration: isVideoFile ? 30 : undefined, // 模拟视频时长，实际应该从后端获取
              };
            }) || [],
        };
      });

      console.log(`📦 本次获取到 ${newDynamics.length} 条数据`);

      if (newDynamics.length === 0) {
        noMore.value = true;
        console.log("🚫 没有更多数据，设置 noMore = true");

        // 如果是第一页且没有数据，显示空状态
        if (currentPage.value === 1) {
          dynamicsList.value = [];
          console.log("📭 第一页无数据，显示空状态");
        }
      } else {
        // 判断是否还有更多数据（如果返回的数据少于每页大小，说明已到最后一页）
        if (newDynamics.length < pageSize.value) {
          noMore.value = true;
          console.log(
            `📄 返回数据(${newDynamics.length})少于页面大小(${pageSize.value})，已到最后一页`
          );
        }

        // 如果是第一页，替换数据；否则追加数据
        if (currentPage.value === 1) {
          dynamicsList.value = newDynamics;
          console.log("🔄 第一页数据，替换现有列表");
        } else {
          dynamicsList.value = [...dynamicsList.value, ...newDynamics];
          console.log(`➕ 追加数据，当前总计 ${dynamicsList.value.length} 条`);
        }

        // 准备下一页
        currentPage.value++;
        console.log(`📈 页码更新为 ${currentPage.value}`);
      }
    } else {
      // API调用失败，显示错误信息
      console.log("API调用失败:", response.data?.message || "未知错误");
      uni.showToast({
        title: "获取数据失败，请重试",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("请求失败:", error);
    uni.showToast({
      title: "网络错误，请检查网络连接",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 点赞功能
const handleLike = async (item: DynamicItem) => {
  try {
    // 这里应该传递真实的用户ID，暂时使用固定值
    const userId = "user123"; // 实际项目中应该从用户状态获取

    const response = await axios.post(`/h5api/jjx/likeessay/${item.id}`, {
      userId: userId,
    });

    if (response.status === 200 && response.data.success) {
      // 更新本地数据
      const targetItem = dynamicsList.value.find((d) => d.id === item.id);
      if (targetItem) {
        targetItem.likes = response.data.data.likes;
      }

      // 更新点赞状态
      if (likedItems.value.has(item.id)) {
        likedItems.value.delete(item.id);
      } else {
        likedItems.value.add(item.id);
      }

      uni.showToast({
        title: response.data.message,
        icon: "success",
      });
    }
  } catch (error) {
    console.error("点赞失败:", error);
    uni.showToast({
      title: "点赞失败，请重试",
      icon: "none",
    });
  }
};

// 处理动态项点击事件
const handleItemClick = (item: DynamicItem) => {
  console.log("点击动态项:", item);
  // 跳转到动态详情页面
  uni.navigateTo({
    url: `/pages/main/mainpages/dynamic_details?dynamicId=${item.id}`,
    success: () => {
      console.log("跳转到动态详情页面成功");
    },
    fail: (error: any) => {
      console.error("跳转失败:", error);
      uni.showToast({
        title: "页面跳转失败",
        icon: "none",
      });
    },
  });
};

const handlePublishClick = (data: any) => {
  // 跳转到发布页面
  uni.navigateTo({
    url: "/pages/news/publish",
    events: {
      // 监听发布成功事件
      publishSuccess: (data: any) => {
        console.log("收到发布成功事件:", data);
        // 重新加载数据
        resetData();
        // 显示提示
        uni.showToast({
          title: "动态已发布",
          icon: "success",
          duration: 1500,
        });
      },
    },
  });
};

const goToHotDetail = () => {
  const hot = hotItem.value;
  if (hot.item) {
    console.log("查看热榜详情:", hot.item);
    // 这里可以跳转到动态详情页面，或者触发动态详情的显示
    uni.showToast({
      title: `查看热门动态: ${hot.item.username}`,
      icon: "none",
    });
  } else {
    uni.showToast({
      title: "暂无热门动态",
      icon: "none",
    });
  }
};

const goToSearch = () => {
  console.log("跳转到搜索页面");
  uni.navigateTo({
    url: "/pages/news/search",
  });
};

// 生命周期
onMounted(() => {
  loadCategories(); // 先加载分类数据
  loadData(); // 再加载动态数据
});

// 页面显示时刷新数据
const onShow = () => {
  console.log("页面显示，刷新动态数据");
  resetData(); // 重新加载最新数据
};

// uni-app生命周期钩子
const onReachBottom = () => {
  console.log("📚 触底加载更多数据");

  // 防抖处理，避免频繁触发
  if (loading.value) {
    console.log("⏳ 正在加载中，跳过此次触底事件");
    return;
  }

  if (noMore.value) {
    console.log("✋ 已到达底部，没有更多数据");
    return;
  }

  // 显示触底加载提示
  uni.showToast({
    title: "加载更多...",
    icon: "loading",
    duration: 1000,
    mask: false,
  });

  loadData();
};

// 下拉刷新
const onPullDownRefresh = () => {
  console.log("🔄 下拉刷新触发");

  // 重置状态并刷新数据
  resetData();

  // 延迟关闭下拉刷新状态，让用户看到刷新效果
  setTimeout(() => {
    uni.stopPullDownRefresh();
    console.log("✅ 下拉刷新完成");
  }, 1000);
};

// 导出uni-app生命周期方法供uni-app使用
defineExpose({
  onReachBottom,
  onShow,
  onPullDownRefresh,
});
</script>

<style lang="scss" scoped>
.page-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 热榜区域 */
.hot-list-container {
  background-color: #fff;
  margin: 15rpx 20rpx;
  padding: 25rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.hot-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.hot-title {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.hot-icon {
  font-size: 32rpx;
}

.hot-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.hot-actions {
  display: flex;
  gap: 15rpx;
}

.action-btn {
  width: 60rpx;
  height: 60rpx;
  background-color: #f8f8f8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  transition: all 0.2s;

  &:active {
    transform: scale(0.9);
    background-color: #f0f0f0;
  }
}

.hot-item {
  background: linear-gradient(135deg, #ffe5d9, #fff0e6);
  padding: 20rpx;
  border-radius: 12rpx;
  border-left: 4rpx solid #ff6e26;
  transition: all 0.2s;

  &:active {
    transform: scale(0.98);
  }
}

.hot-content {
  display: block;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 12rpx;
}

.hot-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hot-category {
  font-size: 24rpx;
  color: #ff6e26;
  background-color: rgba(255, 110, 38, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.hot-count {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
}

.dynamics-container {
  background-color: #f7f7f7;
  padding: 0;
  min-height: calc(100vh - 200rpx);
}

/* 头部区域 */
.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.title-section {
  flex: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.tab-switches {
  display: flex;
  background-color: #f8f8f8;
  border-radius: 40rpx;
  padding: 6rpx;
}

.tab-item {
  padding: 12rpx 24rpx;
  font-size: 28rpx;
  color: #666;
  border-radius: 34rpx;
  transition: all 0.3s;

  &.active {
    background-color: #ff6e26;
    color: #fff;
  }
}

/* 分类标签栏 */
.category-tabs {
  background-color: #fff;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.scroll-tabs {
  white-space: nowrap;
  padding: 0 30rpx;
}

.category-item {
  display: inline-block;
  padding: 12rpx 24rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f8f8f8;
  border-radius: 40rpx;
  transition: all 0.3s;

  &.active {
    background-color: #ff6e26;
    color: #fff;
  }

  &:last-child {
    margin-right: 30rpx;
  }
}

/* 时间筛选弹窗样式 */
.time-filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.time-filter-popup {
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 50%, #ffa726 100%);
  width: 100%;
  max-height: 85vh;
  border-radius: 32rpx 32rpx 0 0;
  overflow: hidden;
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.15);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="40" cy="80" r="1.5" fill="rgba(255,255,255,0.08)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 45rpx;
  position: relative;
  z-index: 1;
}

.close-btn {
  width: 68rpx;
  height: 68rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.2);

  &:active {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0.9) rotate(90deg);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  }
}

.popup-title {
  font-size: 40rpx;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.2);
  letter-spacing: 2rpx;
  position: relative;

  &::after {
    content: "✨";
    position: absolute;
    right: -25rpx;
    top: -5rpx;
    font-size: 20rpx;
    animation: sparkle 2s infinite;
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.confirm-btn {
  background: rgba(255, 255, 255, 0.95);
  color: #ff6b35;
  padding: 20rpx 36rpx;
  border-radius: 25rpx;
  font-size: 30rpx;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

  &:active {
    background: rgba(255, 255, 255, 1);
    transform: scale(0.95);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
  }
}

.popup-content {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 32rpx 32rpx 0 0;
  min-height: 55vh;
  padding: 45rpx 0 20rpx;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.5);
}

.time-machine-section {
  padding: 0 40rpx 35rpx;
  margin-bottom: 25rpx;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40rpx;
    right: 40rpx;
    height: 1rpx;
    background: linear-gradient(
      90deg,
      rgba(255, 107, 53, 0.1) 0%,
      rgba(255, 140, 66, 0.3) 50%,
      rgba(255, 107, 53, 0.1) 100%
    );
  }
}

/* 快捷日期选项样式 */
.quick-date-section {
  padding: 0 40rpx 35rpx;
  margin-bottom: 25rpx;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40rpx;
    right: 40rpx;
    height: 1rpx;
    background: linear-gradient(
      90deg,
      rgba(255, 107, 53, 0.1) 0%,
      rgba(255, 140, 66, 0.3) 50%,
      rgba(255, 107, 53, 0.1) 100%
    );
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.section-label {
  font-size: 30rpx;
  font-weight: 700;
  color: #2d3748;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: -15rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 24rpx;
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
    border-radius: 3rpx;
  }
}

.quick-buttons {
  display: flex;
  gap: 16rpx;
  margin-bottom: 16rpx;
  flex-wrap: wrap;
}

.quick-btn {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  color: #4a5568;
  padding: 18rpx 24rpx;
  border-radius: 24rpx;
  font-size: 26rpx;
  font-weight: 600;
  border: 2rpx solid #e2e8f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
  text-align: center;
  min-width: 120rpx;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      135deg,
      rgba(255, 107, 53, 0.15) 0%,
      rgba(255, 140, 66, 0.15) 100%
    );
    transition: left 0.3s ease;
  }

  &:active {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
    color: #ffffff;
    border-color: #ff6b35;
    transform: translateY(2rpx);
    box-shadow: 0 6rpx 16rpx rgba(255, 107, 53, 0.3);

    &::before {
      left: 0;
    }
  }

  &:hover::before {
    left: 0;
  }
}

.clear-btn {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  color: #718096;
  padding: 12rpx 20rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 600;
  border: 2rpx solid #e2e8f0;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);

  &:active {
    background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
    color: #e53e3e;
    border-color: #fc8181;
    transform: scale(0.95);
    box-shadow: 0 4rpx 8rpx rgba(229, 62, 62, 0.2);
  }
}

/* 手动输入区域样式 */
.manual-input-section {
  padding: 0 40rpx 35rpx;
  margin-bottom: 25rpx;
  position: relative;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  padding: 24rpx;
  border-radius: 20rpx;
  border: 2rpx solid #e2e8f0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3rpx;
    background: linear-gradient(90deg, #ff6b35 0%, #ff8c42 50%, #ff6b35 100%);
  }
}

.date-input {
  flex: 1;
  min-width: 100rpx;
  max-width: 140rpx;
  height: 72rpx;
  border: 2rpx solid #cbd5e0;
  border-radius: 16rpx;
  padding: 0 16rpx;
  font-size: 30rpx;
  font-weight: 600;
  text-align: center;
  background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
  color: #2d3748;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);

  &:focus {
    border-color: #ff6b35;
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%);
    box-shadow: 0 0 0 4rpx rgba(255, 107, 53, 0.1),
      0 4rpx 8rpx rgba(255, 107, 53, 0.15);
    transform: translateY(-2rpx);
  }

  &::placeholder {
    color: #a0aec0;
    font-weight: 500;
  }
}

.input-separator {
  font-size: 28rpx;
  font-weight: 700;
  color: #4a5568;
  margin: 0 8rpx;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.date-preview {
  margin-top: 20rpx;
  padding: 20rpx 24rpx;
  background: linear-gradient(135deg, #e6fffa 0%, #f0fff4 50%, #fefcbf 100%);
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #065f46;
  text-align: center;
  border: 2rpx solid #10b981;
  box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.15);
  position: relative;
  overflow: hidden;

  &::before {
    content: "✨";
    position: absolute;
    left: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24rpx;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3rpx;
    background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #10b981 100%);
  }
}

.time-machine-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.time-machine-btn {
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
  color: #ffffff;
  padding: 20rpx 36rpx;
  border-radius: 25rpx;
  font-size: 26rpx;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 2rpx solid rgba(255, 255, 255, 0.2);

  &::before {
    content: "⚡";
    position: absolute;
    left: 16rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22rpx;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    transition: left 0.5s ease;
  }

  &:active {
    transform: translateY(2rpx) scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.4);

    &::after {
      left: 100%;
    }
  }
}

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
  .hot-list-container {
    margin: 12rpx 15rpx;
    padding: 20rpx;
  }

  .hot-text {
    font-size: 28rpx;
  }

  .action-btn {
    width: 50rpx;
    height: 50rpx;
    font-size: 24rpx;
  }

  .hot-content {
    font-size: 26rpx;
  }

  .hot-category,
  .hot-count {
    font-size: 22rpx;
  }

  .header-section {
    padding: 15rpx 20rpx;
  }

  .page-title {
    font-size: 32rpx;
  }

  .tab-item {
    padding: 10rpx 18rpx;
    font-size: 26rpx;
  }

  .category-item {
    padding: 10rpx 18rpx;
    font-size: 26rpx;
  }

  .interaction-stats {
    gap: 14rpx;
  }

  .fire-icon {
    font-size: 26rpx;
  }

  .comment-icon,
  .heart-icon {
    font-size: 24rpx;
  }

  .stat-number {
    font-size: 22rpx;
  }

  .publish-btn {
    width: 90rpx;
    height: 90rpx;
    right: 20rpx;
    bottom: 100rpx;
  }

  .publish-icon {
    font-size: 36rpx;
  }
}
</style>